<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outerBox{
            width: 200px;
            height: 200px;
            overflow: scroll;
        }
        .innerBox {
            width: 200px;
            height: 1000px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outerBox" id="box">
        <div class="innerBox"></div>
    </div>
</body>
<script>
    // document.getElementById("box").addEventListener("scroll",function(e){
    //     console.log("滚动啦",e);
    // })
    // document.getElementById("box").addEventListener("scroll",debounce(function(){
    //     console.log("防抖发生啦");
    // },1000))
    document.getElementById("box").addEventListener("scroll",throttle(function(){
        console.log("节流发生啦");
    },1000))
    /* 防抖 在一段时间内 事件频繁发生 以最后一次为准 */
    /* 
        @fn 执行函数
        @time 延时的时间
    */
   function debounce(fn,time){
       let timeId = null;// 定时器ID
       return function(){
           if(timeId){
               clearTimeout(timeId);
               timeId = null;
           }
           timeId = setTimeout(fn,time);
       }
   }
   /* 
   节流 事件频繁发生 有规律性去执行
   */
  function throttle(fn,time){
      let valid = true;
      return function(){
          if(valid){
              valid = false;
              setTimeout(function(){
                  fn.call(this);
                  valid = true;
              },time)
          }
      }
  }
</script>
</html>